<template>
	<view class="add_estate_box">
		<Tips/>
		<MyNull height="calc(30vh)" img="addEstateNull.png"/>
		<view class="add_estate_item">
			<MyInput
				label="名字"
				v-model="fromData.name"
				:focus="false"
				fontSize="30rpx" 
				:borderColor="primary_light_color" />
		</view>
		<view class="add_estate_item">
			<MyInput
				label="金额"
				fontSize="70rpx"
				:color="primary_hot_color"
				:borderColor="primary_light_color" 
				:focus="false"
				v-model="fromData.price"
				height="80rpx"
				type="digit"/>
		</view>
		<view class="add_estate_item" @click="billFocusFun">
			<MyInput
				label="账单"
				v-model="fromData.bill_id"
				fontSize="30rpx"
				placeholder="点击选择已有的账单"
				:focus="false"
				:disabled="true"
				:borderColor="primary_light_color" />
			
		</view>
		<view class="add_estate_item">
			<MyInput
				label="备注"
				v-model="fromData.info"
				fontSize="30rpx" 
				:focus="false"
				:borderColor="primary_light_color" />
		</view>
		<view class="add_estate_item">
			<view class="proof">
				<view class="img">
					<Avatar :isAllowPreview="true" :joinUrlFun="joinEstateImg" radius="0rpx" :size="imgSize" :fileName="fromData.img_url"/>
				</view>
				<view class="info">
					<view @click="uploadImg">
						上传物品图片
					</view>
				</view>
			</view>
		</view>
		<AdBanner width="100%"/>
		<view class="add_estate_item">
			<MyButton :clickFun="submitEstate" :bgc="primary_hot_color">保存</MyButton>
		</view>
		<MyModal :modalBgc="primary_main_bgc" :isShowFooter="false" :openModalFlag="modalChooseBillFlag">
			<template #title>
				点击账单即可选中
			</template>
			<template #content>
				<Bills :mountTip="true" @chooseBillByEstateEmit="chooseBillByEstateFun" :isChooseBill="true"/>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onHide
	} from '@dcloudio/uni-app'
	
	import {ref,watch,onDeactivated, nextTick,computed} from 'vue'
	
	import MyInput from '@/components/MyInput/MyInput.vue'
	import Bills from '@/pages/Dormitory/Bills/Bills.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {
		userStore
	} from '@/stores/user'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		joinEstateImg
	} from '@/utils/imgJoinName.js'
	
	import {uploadImgHook} from '@/hooks/uploadImg.js'
	import { verifyFormData,verifyIsShowChooseAd} from '../../../hooks/verify'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_light_color,
		primary_hot_color,
		primary_main_bgc,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const dormitoryAllId = uni.getStorageSync('homeData')
	
	const fromData=ref({
		name:'',
		price:'0.00',
		info:'',
		img_url:'',
		bill_id:''
	})
	const formDataSchema={
		name:{
			required:true,
			tip:'名字'
		},
		img_url:{
			required:true,
			tip:'物品图片'
		},
		price:{
			required:true,
			tip:'金额'
		}
	}
	//表单显示的账单类型
	const billType=ref('')
	
	const modalChooseBillFlag=ref(0)
	const isPrivacy = computed(()=>user_store.userInfo.isPrivacy)
	//是否点击账单
	const billFocusFun=()=>{
		modalChooseBillFlag.value = Math.random()
	}
	//选中的账单
	const chooseBillByEstateFun=(e)=>{
		modalChooseBillFlag.value = -Math.random()
		fromData.value.bill_id = e.id
		billType.value = e.billType.billType_name
		fromData.value.price = e.money
	}
	
	const imgSize=ref(0)
	const alignInfo=ref('')
	watch(()=>fromData.value.img_url,()=>{
		if(fromData.value.img_url.length>1){
			imgSize.value = '200rpx'
			alignInfo.value='center'
		}else{
			imgSize.value = '0rpx'
			alignInfo.value=''
		}
	},{immediate:true})
	
	//封面上传
	const uploadImg=()=>{
		uni.$emit('checkUserPrivacyProtocol')
		if(!isPrivacy.value){
		    return
		}
		uploadImgHook("uploadEstateImg",`/upload/estate/img`)
	}
	
	//监听图片上传成功
	uni.$on('uploadEstateImg',function(data){
		;(()=>{
			if(data){
				fromData.value.img_url=data
			}
		})()
	})
	
	const submitEstate=async()=>{
		verifyFormData(fromData.value,formDataSchema)
		if(Number(fromData.value.price)>10000000 || String(Number(fromData.value.price)).includes('e')){
			return uni.$emit('tips','金额较大，请斟酌输入','info')
		}
		verifyIsShowChooseAd(getCurrentPages(),'记录公共物品')
		const {data,success} = !editEstateId.value ? 
		await dormitoryModel.postAddEstate(fromData.value,dormitoryAllId.dormitory_id) :
		await dormitoryModel.patchEstate(fromData.value,editEstateId.value)
		if(success){
			uni.$emit('tips',data,'success')
			setTimeout(()=>{
				uni.navigateBack()
				uni.redirectTo({
					url:`/pages/Dormitory/Estates/Estates?isRefresh=true`
				})
			},300)
		}
	}
	const editEstateId=ref('')
	const getEditEstateInfo=async(id)=>{
		const {data,success} = await dormitoryModel.getEstate({},id)
		if(success){
			const {
				price,name,info,img_url,bill
			} = data
			fromData.value = {
				name,
				price,
				info,
				img_url,
				bill_id:bill.bill_id || ''
			}
			billType.value = bill.billTypeName
		}
	}
	
	onDeactivated(()=>{
		uni.$off('uploadEstateImg')
	})
	onLoad((opt)=>{
		const {estate_id} = opt
		if(estate_id){
			editEstateId.value = estate_id
			getEditEstateInfo(estate_id)
		}
		nextTick(()=>{
			uni.$emit('checkUserPrivacyProtocol')
		})
		nextTick(()=>{
			uni.$emit('autoShowPushScreenAd')
		})
	})
</script>

<style lang="less">
	.add_estate_box{
		height:calc(100vh);
		padding: 20rpx;
		.add_estate_item{
			margin: 30rpx 0;
			.proof{
				display: flex;
				padding-left: 30rpx;
				margin: 30rpx 0;
				.img{
					max-width: 40%;
				}
				.info{
					width: 60%;
					display: flex;
					align-items: v-bind(alignInfo);
					font-size: 30rpx;
					color: v-bind(primary_text_color);
					margin-left: 4rpx;
				}
			}
		}
		.add_estate_item:nth-child(1){
		}
	}
</style>
